<template>
  <div class="app">
    <h1>{{ msg }}，学生姓名是：{{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法：使用 @ 或 v-on） -->
    <!-- <Student v-on:xxx="getStudentName" @demo="f1" /> -->
    <!-- 只触发一次 -->
    <!-- <Student @xxx.once="getStudentName" /> -->
    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法：使用 ref） -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "你好",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名：", name);
    },
    getStudentName(name, ...args) {
      console.log("App收到了学生名：", name, args);
      this.studentName = name;
    },
    f1() {
      console.log("demo事件触发了");
    },
    show() {
      // alert(1);
    },
  },
  mounted() {
    // 绑定自定义事件
    // 这样写可以满足 等一等 的需求setTimeOut
    this.$refs.student.$on("xxx", this.getStudentName);

    // ×
    /* this.$refs.student.$on("xxx", function (name, ...args) {
      console.log("App收到了学生名：", name, args);
      console.log(this); // Student实例
    }); */

    // √但不推荐
    /* this.$refs.student.$on("xxx", (name, ...args) => {
      console.log("App收到了学生名：", name, args);
      console.log(this); // App实例
    }); */

    // 绑定自定义事件（一次性）
    // this.$refs.student.$once("xxx", this.getStudentName);
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
